<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center2 lessons-add">
        <div class="main-left">
          <div class="con2">
            <div class="clear"></div>
            <div class="form-add">
              <dl class="tiptit" v-if="title_str == ''">未选择备课章节，请从右侧课程资源选择备课章节</dl>
              <dl class="tiptit" v-if="title_str != ''">{{ title_str }}</dl>
              <dl>
                <dt style="width: auto;">
                  <i class="fl">*</i>
                  备课标题：
                </dt>
                <dd>
                  <el-input v-model="title" style="width: 405px;" placeholder="请输入备课标题"></el-input>
                </dd>
              </dl>

              <dl class="ytit" v-if="listData.length == 0">{{ tip_txt }}</dl>
              <dl class="ytit" v-if="listData.length > 0">已添加{{ listData.length }}个资源，拖动缩略图进行排序</dl>
            </div>
            <ul class="select-list">
              <draggable v-model="listData" @end="endEvent" v-bind="dragOptions">
                <template v-for="(vo, j) in listData">
                  <li v-if="vo.resources_name" :key="j">
                    <label class="del" @click="delLi(j, vo.id)"></label>
                    <div class="pic" @click="goDetail(j, vo)">
                      <div class="pic_area">
                        <img :src="vo.cover" alt />
                      </div>
                    </div>
                    <p class="tit">{{ vo.resources_name }}</p>
                  </li>
                </template>
                <li class="add-one" @click="addOne">
                  <div class="pic">
                    <img src="static/img/add-pic.png" />
                  </div>
                  <p class="tit">添加资源</p>
                </li>
              </draggable>
            </ul>
            <div class="mt30 tx-c">
              <el-button :disabled="disabled" @click="takeBclassInfo">保存备课</el-button>
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="con-menu" @click="openCourseDig">
            <div class="menu-img">
              <img src="static/img/kczy.png" alt />
            </div>
            <div class="menu-item">课程资源</div>
          </div>

          <div class="con-menu2" @click="openZiyuan">
            <div class="menu-img">
              <img src="static/img/zyzx.png" alt />
            </div>
            <div class="menu-item">资源中心</div>
          </div>
          <div class="con-menu2" @click="openSpace()">
            <div class="menu-img">
              <img src="static/img/wdkj.png" alt />
            </div>
            <div class="menu-item">我的空间</div>
          </div>

          <div class="con-menu2" @click="
              isUpload = true;
              isUploadSetFile = true;
              getGroupList();
              getSpaceUseInfo();
            ">
            <div class="menu-img">
              <img src="static/img/shangchuan.png" alt />
            </div>
            <div class="menu-item">上传</div>
          </div>
          <div class="con-menu2" @click="goHome()">
            <div class="menu-img">
              <img src="static/img/r-home.png" alt />
            </div>
            <div class="menu-item">首页</div>
          </div>

          <div class="con-menu" @click="goBkb()">
            <div class="menu-img">
              <img src="static/img/bkb.png" alt />
            </div>
            <div class="menu-item">我的备课包</div>
          </div>
        </div>
      </div>
    </div>

    <div class="arrow-right" style="display: none;" @click="isGroup = true"></div>

    <div class="maskBg"
      v-if="isOpen == true || isGroup == true || isOpen2 == true || isOpen3 == true || isOpen4 == true || isOpen5 == true || isOpen6 == true">
    </div>
    <div class="selectChapter" v-if="isOpen == true">
      <div class="title">
        <span style="margin-left:60px;">选择课程</span>
        <span class="closed" @click="(isOpen = false), getClose()">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="cont">
        <div class="m-left">
          <template v-for="(item, i) in cateData">
            <h3 :key="'h_'+i" @click="openCh(i, item)" :class="['tit', { cur: 1 == item.id }]">{{ item.kind_name }}</h3>
            <ul :key="'u_'+i" :class="['cur', { none: 1 == item.id }]">
              <template v-for="(vo, j) in item.kind_item">
                <li :key="'l_'+j" :class="{ cur: p_id == vo.id }" @click="selectCh(j, vo, item)">{{ vo.kind_item_name }}
                </li>
              </template>
            </ul>
          </template>
        </div>
        <div class="m-right">
          <div class="sel-c">
            <template v-for="(item, i) in dirData">
              <dl :key="'d_'+i">
                <dt v-if="item.chapter_name">{{ item.chapter_name }}</dt>
                <dd>
                  <template v-for="(vo, j) in item.dir_item">
                    <a :key="'a_'+j" :class="{ cur: cate_id == vo.id }" @click="fillter(j, vo)">{{ vo.dir_name }}</a>
                  </template>
                </dd>
              </dl>
            </template>
          </div>
          <div class="mt30 botact">
            <button class="cancel" type="info" @click="isOpen = false">取消</button>
            <button @click="nextclick()" class="sure">下一步</button>
          </div>
        </div>
      </div>
    </div>
    <div class v-if="isOpen2 == true || isOpen == true">
      <div class="arrow-right" @click="isLeftShow = true"></div>
    </div>

    <div class="bhDig" v-if="isLeftShow == true">
      <div class="arrow-ll" @click="isLeftShow = false"></div>
      <div class="form-add">
        <dl>
          <dt>
            <i>*</i>
            备课标题：
          </dt>
          <dd>
            <el-input v-model="title" style="width: 405px;" placeholder="请输入备课标题"></el-input>
          </dd>
        </dl>
        <dl>
          <dt>
            <i>*</i>
            课件选择：
          </dt>
          <dd>已添加{{ listData.length }}个资源</dd>
        </dl>
      </div>
      <ul class="select-list">
        <template v-for="(vo, j) in listData">
          <li :key="j">
            <label class="del" @click="delLi(j, vo.id)"></label>
            <div class="pic" @click="goDetail(j, vo)">
              <div class="pic_area">
                <img :src="vo.cover" />
              </div>
            </div>
            <p class="tit">{{ vo.resources_name }}</p>
          </li>
        </template>
      </ul>
    </div>
    <div class="selectChapter selectChapter-2" v-if="isOpen2 == true">
      <div class="title">
        <span class="zj-back" @click="closeOpen2">返回课程</span>
        <span></span>
        <div class="item-reference" @click="reference()">
          <img src="static/img/yinyong.png" style="width: 18px;height: 18px;" />
          一键引用课程
        </div>
        <span class="closed" @click="closeOpen2(), getClose()">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="cont">
        <div class="m-left2" :class="getFileType(currentCourse.file) == 'video'?'specialVideo':''">
          <ul style="overflow-x: initial!important">
            <template v-for="(vo, j) in tagData">
              <li :key="j" :class="{ cur: tag_id == vo.id }" @click="selTag(j, vo.id)">{{ vo.tag_name }}</li>
              <!-- <li :class="{ cur: tag_id == vo.id }" @click="selTag(j, vo.id)">{{ vo.tag_name }}</li> -->
            </template>
          </ul>
          <div class="play_area">
            <!-- 视频音频 -->
            <div id="course-player" v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" v-if="getFileType(currentCourse.file) == 'video'"></div>
            <template v-else-if="getFileType(currentCourse.file) == 'html'">
              <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" style="height:100%;">
                <iframe style="width: 100%;height: 100%;" class="addPad" :src="currentCourse.file"
                  @loadstart="isIframeLoad=true" @load="isIframeLoad = false"></iframe>
              </div>
            </template>
            <div v-else-if="getFileType(currentCourse.file) == 'radio'">
              <div class="item-classRadio" :style="{ 'background-image': 'url(' + bgImg + ')' }">
                <img v-if="showImg" :class="isPlayMusic ? activeClass : errorClass" src="../../../static/img/music1.png"
                  style="width: 372px;min-height: 372px;" />
                <div class="raad-box" v-else>
                  <div class="item-read" :class="{'no_mask':!currentCourse.is_mask!=1}" style="padding-top: 2%;">
                    <div v-for="(item, index) in read" :key="index" class="item-all">
                      <span v-if="index + 1 < read.length">
                        <span
                          :class="[currentTxt > read[index].time - 1 && currentTxt < read[index + 1].time ? 'item-color' : '']">{{ item.text }}</span>
                      </span>
                    </div>
                  </div>
                </div>
                <audio @ended="stopMusic()" @pause="stopMusic()" @play="playMusic()" id="audio" class="item-changeAudio"
                  @timeupdate="update" :src="music" controls="controls" controlslist="nodownload">Your browser does not
                  support the audio element.</audio>
              </div>
            </div>

            <!-- office文件 -->
            <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" v-else-if="
                getFileType(currentCourse.file) == 'excel' ||
                  getFileType(currentCourse.file) == 'word' ||
                  getFileType(currentCourse.file) == 'pdf' ||
                  getFileType(currentCourse.file) == 'ppt'
              " style="height:100%;">
              <iframe style="background-color: #FFFFFF;" class="course-iframe"
                :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentCourse.file" @loadstart="isIframeLoad=true"
                @load="isIframeLoad = false"></iframe>
            </div>
            <!-- 图片 -->
            <div class="course-iframe" v-else-if="getFileType(currentCourse.file) == 'image'">
              <img :src="currentCourse.file" />
            </div>

            <template v-else-if="getFileType(currentCourse.file) == 'swf'">
              <object :data="currentCourse.file" type="application/x-shockwave-flash"
                style="width:970px;height:60%;position: fixed;top: 50%;left: 50%;transform: translate(-60%,-45%);">
                <param name="movie" value="demo.swf" />
                <embed :src="currentCourse.file" />
              </object>
            </template>
          </div>
        </div>
        <div class="m-right2">
          <h3 class="tit">选择资源</h3>
          <p class="sel_no" @click="handleCheckAllChange" v-if="isSelAll == true">全选</p>
          <p class="sel_ok" @click="handleNoCheckAllChange" v-if="isSelAll == false">取消全选</p>
          <ul>
            <el-checkbox-group v-model="checkedCourse">
              <template v-for="(vo, j) in secData">
                <li :key="j" :class="{ cur: sec_id == vo.id }">
                  <el-checkbox :key="vo.id" :label="JSON.stringify(vo)" @change="handleChecked(j, vo)">&nbsp;
                  </el-checkbox>
                  <span @click="handleCheckedChange(vo)"
                    class="item-span">{{ vo.resources_name.substring(0, 10) }}</span>
                </li>
              </template>
            </el-checkbox-group>
          </ul>
        </div>
      </div>
      <div class="mt10 baseAct" style="margin-top:20px;">
        <button class="cancel" type="info" @click="isOpen2 = false">取消</button>
        <button @click="goNext()" class="sure">确定</button>
        <label>选中资源数 {{ checkedCourse.length }}</label>
      </div>
      <!-- <div class="arrow-right"></div> -->
    </div>
    <!--我的收藏弹出层-->
    <div class="selectChapter" v-if="isOpen4 == true">
      <div class="title">
        <span style="margin-left:60px;">资源中心——我的收藏</span>
        <span class="tips" v-if="ziyuanMyData.length">
          进入“
          <span @click="goCourse"
            style="color:#3688E9;font-size: 18px;margin:0;cursor: pointer;">资源中心</span>”，将资源加入收藏，便可引用
        </span>
        <span class="closed" @click="getClose()">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="cont">
        <div class="m-center33" v-if="ziyuanMyData.length > 0">
          <div class="play_area" style="height:100%">
            <!-- 视频音频 -->
            <div id="course-player" v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" v-if="getFileType(currentZiyuan.file) == 'video'"></div>
            <div v-else-if="getFileType(currentZiyuan.file) == 'radio'">
              <div class="item-Collectradio" :style="{ 'background-image': 'url(' + bgImg + ')' }">
                <img v-if="showImg" :class="isPlayMusic ? activeClass : errorClass" src="../../../static/img/music1.png"
                  style="width: 372px;min-height: 372px;" />
                <div class="raad-box" v-else>
                  <div class="item-read" :class="{'no_mask':!currentZiyuan.is_mask!=1}" style="padding-top: 5%;">
                    <div v-for="(item, index) in read" :key="index" class="item-all">
                      <span v-if="index + 1 < read.length">
                        <span
                          :class="[currentTxt > read[index].time - 1 && currentTxt < read[index + 1].time ? 'item-color' : '']">{{ item.text }}</span>
                      </span>
                    </div>
                  </div>
                </div>
                <audio @ended="stopMusic()" @pause="stopMusic()" @play="playMusic()" id="audio" autoplay
                  class="item-collectAudio" @timeupdate="update" :src="music" controls="controls"
                  controlslist="nodownload">Your browser does not support the audio element.</audio>
              </div>
            </div>
            <!-- office文件 -->
            <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" v-else-if="
                getFileType(currentZiyuan.file) == 'excel' ||
                  getFileType(currentZiyuan.file) == 'word' ||
                  getFileType(currentZiyuan.file) == 'pdf' ||
                  getFileType(currentZiyuan.file) == 'ppt'
              " style="height:100%;">
              <iframe style="background-color: #FFFFFF;" class="course-iframe"
                :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentZiyuan.file" @loadstart="isIframeLoad=true"
                @load="isIframeLoad = false"></iframe>
            </div>
            <!-- 图片 -->
            <div v-else-if="getFileType(currentZiyuan.file) == 'image'">
              <el-carousel height="760px" indicator-position="outside" :interval="100000"
                v-if="currentZiyuan.file.split(';').length > 1">
                <el-carousel-item v-for="(item, index) in currentZiyuan.file.split(';')" :key="index">
                  <img :src="item" />
                </el-carousel-item>
              </el-carousel>

              <img :src="currentZiyuan.file" v-if="currentZiyuan.file.split(';').length == 1" />
            </div>
            <template v-else-if="getFileType(currentZiyuan.file) == 'swf'">
              <object :data="currentZiyuan.file" type="application/x-shockwave-flash" class="item-collectSwf">
                <param name="movie" value="demo.swf" />
                <embed :src="currentZiyuan.file" />
              </object>
            </template>
          </div>
        </div>
        <!--<div class="m-center33" v-else>-->
        <div v-else style="position: relative;height: 700px;" class="t_empty_box">
          <p class="collection_res" style="position:static;margin-top:80px;">无收藏资源</p>
          <br />
          <p class="resouce-center" style="position:static;margin-top:28px;">
            进入“
            <span class="res-style" @click="goCourse">资源中心</span>”，将资源加入收藏，便可引用
          </p>
          <p class="res-style refresh" style="position:static;margin-top:220px;" @click="refresh">刷新</p>
        </div>
        <!--</div>-->
        <div class="m-right3" style="height:740px;width:220px;" @mousewheel="getMyZiyuanList()"
          v-if="ziyuanMyData.length">
          <el-checkbox-group v-model="checkedZY">

            <el-tree ref="tree" :props="{'children':'list'}" :data="ziyuanMyData" node-key="id"
              @node-click="handleNodeClick" :default-expanded-keys="defaultExpandedKeys">
              <span class="tree_item" slot-scope="{ node, data } "
                style="position: relative; width: 100%; height: 100%;">
                <el-checkbox v-if="data.type != 'folder'" :key="data.id" :label="JSON.stringify(data)"
                  @change="handleCheckedZY(data.kind_item_name)">&nbsp;</el-checkbox>
                <span class="el_tree_item_name" :class="{'child_text':node.level == 2}">{{ data.resources_name }}</span>
                <label :class="['  fr', 'ico-' + getFileType(data.file)]">&nbsp;</label>
              </span>
            </el-tree>
          </el-checkbox-group>






          <!-- <ul>
              <template v-for="(item, i) in ziyuanMyData">
                <li :key="i" :class="{ cur: zy_id == item.id }">
                  <el-checkbox :key="item.id" :label="JSON.stringify(item)"
                    @change="handleCheckedZY(item.kind_item_name)">&nbsp;</el-checkbox>
                  <span class="resources_name" @click="playLi(i,item)">{{ item.resources_name.substring(0, 10) }}</span>
                  <span :class="['  fr', 'ico-' + getFileType(item.file)]"></span>
                </li>
              </template>
            </ul> -->

        </div>
      </div>
      <div class="mt10 baseAct operation_group" style="margin-top: 10px !important;">
        <!-- <div class="mt10 baseAct " style="margin-top: 10px !important;"> -->
        <button class="cancel" type="info" @click="isOpen4 = false">取消</button>
        <button @click="goNext4()" class="sure">确定</button>
      </div>
    </div>

    <!--我的空间-->
    <div class="selectChapter" v-if="isOpen5 == true">
      <div class="title">
        <span>我的空间</span>
        <span class="closed" @click="
            isOpen5 = false;
            isGroupFile = false;
            newGroup = false;
            isUploadSetFile = false;
            isEdit = false;
            isUpload = false;
          ">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="list-area">
        <div class="fi-search">
          <el-select style="width: 223px; float: left;" v-model="file_from.group_id" placeholder="选择分组">
            <el-option label="全部" value></el-option>
            <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-input v-model="file_from.search" style="width: 223px;" class="fl search-inp" placeholder="输入名称搜索">
          </el-input>
          <el-button class @click="getSpaceFileList(1)">搜索</el-button>
          <div class="space-tj fr">
            已用:{{ spaceUseInfo.use }}M/{{ spaceUseInfo.all }}M
            <div class="step">
              <div class="process" :style="'width:' + number * 100 + '%;'"></div>
            </div>
          </div>
        </div>
        <div class v-if="spaceFileList.length > 0">
          <ul class="file-list">
            <el-checkbox-group v-model="checkedSpaceFile">
              <template v-for="(vo, j) in spaceFileList">
                <li :key="j" :class="vo.status == '1' ? 'cur' : 'ooo'">
                  <el-checkbox :key="vo.id" :label="vo">&nbsp;</el-checkbox>
                  <div class="pic_area" style="cursor: pointer;">
                    <img :src="vo.image_cover" @click="clickSpaceFile(vo)" />
                    <div class="Myarea">
                      <img @click="changeGroup(vo)" class="myImg" style="left: 30%;" src="static/img/s_edit.png" />
                      <img @click="delFile(vo)" style="left: 70%;" class="myImg" src="static/img/s_del.png" />
                    </div>
                  </div>
                  <p>
                    <!--  -->
                    <span class="tit tit-ellipsis" style="width: 100%;">{{ vo.file_name }}</span>
                  </p>
                </li>
              </template>
            </el-checkbox-group>
          </ul>
          <div class style="display: flex;flex-direction: row-reverse;align-items: center;">
            <span type="button" class="btn-home" style="cursor: pointer;" @click="getSpaceFileList(2)">尾页</span>
            <el-pagination background layout="prev,pager,next " :current-page="file_from.page" :total="myTotal"
              :page-size="1" @current-change="handleMyCurrentChange"></el-pagination>
            <span type="button" style="cursor: pointer;" class="btn-last" @click="getSpaceFileList(1)">首页</span>
          </div>
          <div class="baseAct" style="margin-top: 20px;" v-if="spaceFileList.length > 0">
            <button class="cancel" type="info" @click="isOpen5 = false">取消</button>
            <button @click="selectSpaceFile" class="sure">确定</button>
          </div>
        </div>

        <el-empty v-else></el-empty>
      </div>
      <div class="group-r" @click="
          isGroupFile = true;
          isUpload = false;
        ">分组管理</div>
      <div class="upload-r" @click="
          isUpload = true;
          isGroupFile = false;
          isUploadSetFile = false;
        ">上传</div>

      <div class="groupDig" v-if="isGroupFile == true">
        <div class="title">
          分组管理
          <span class="closed" @click="
              isGroupFile = false;
              newGroup == false;
            ">
            <img src="static/img/close.png" />
          </span>
        </div>
        <div class="cont">
          <div class="new-group" @click="
              newGroup = true;
              group_info = { id: 0 };
            ">新建分组</div>
          <div>
            <ul class="grouplist" style>
              <template v-for="(vo, j) in groupList">
                <li :key="j">
                  <a :class="{ cur: cate_id == vo.id }" @click="fillter(j, vo)">{{ vo.name }}</a>
                  <span class="edit" @click="editGroupName(vo)">修改</span>
                  <span class="del" @click="delGroupName(vo.id)">删除</span>
                </li>
              </template>
            </ul>
          </div>
          <div class="page-area">
            <span type="button" class="btn-home fl" style="cursor: pointer;" @click="getGroupList(1)">首页</span>
            <el-pagination background layout="prev,pager,next " :current-page="currentPage" :total="groupTotal"
              :page-size="1" @current-change="handleCurrentChange"></el-pagination>
            <span type="button" style="cursor: pointer;" class="btn-last fr" @click="getGroupList(groupTotal)">尾页</span>
          </div>
        </div>
      </div>

      <div class="newGroupDig" v-if="newGroup == true">
        <div class="title">
          {{ group_info.id == 0 ? '新建' : '编辑' }}分组
          <span class="closed" @click="newGroup = false">
            <img src="static/img/close.png" />
          </span>
        </div>
        <div class="cont">
          <ul class="grouplist">
            <li class="bt">请输入分组名称</li>
            <li>
              <el-input v-model="group_info.name" placeholder="请输入分组名称"></el-input>
            </li>
          </ul>
        </div>
        <div class="mt30 baseAct width100">
          <button class="cancel" type="info" @click="newGroup = false">取消</button>
          <button @click="saveGroup()" class="sure">确定</button>
        </div>
      </div>
    </div>

    <div class="selectChapter uploadDig" v-if="isUpload == true" v-loading="uploading" element-loading-text="后台处理中..."
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
      <div class="title">
        上传
        <span class="closed" @click="closeUpload">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="cont">
        <div class="space-tj">
          已用:
          <label>{{ spaceUseInfo.use }}M/{{ spaceUseInfo.all }}M</label>
          <div class="step">
            <div class="process" :style="'width:' + number * 100 + '%;'"></div>
          </div>
        </div>
        <ul style="height: 250px;">
          <li class="mt30">
            <el-select style="width: 100%;" v-model="group_id" filterable allow-create default-first-option
              placeholder="请选择">
              <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </li>
          <li class="mt30">
            <el-upload class="upload-demo" :aria-valuemax="99" :before-upload="beforeUpload" :action="uploadUrl"
              :on-progress="handleUpProgress" :on-success="handleUpSuccess" :on-remove="removeFile"
              :file-list="fileList" :limit="1" :show-file-list="isShowFileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip" style="width: 100%; overflow: hidden; height: 50px;display: none;">
                {{ fileName }}</div> -->
            </el-upload>
            <div v-if="upFile && upFile.name" style="margin-top:24px;color:#606266;font-size:14px;">
              <div>
                <span>{{upFile.name}}</span>
              </div>
              <el-progress :percentage="percentage"></el-progress>
            </div>
          </li>
        </ul>
        <div class="mt30 baseAct width100">
          <button class="cancel" type="info" @click="
              isUpload = false;
              fileName = '';
            ">取消</button>
          <button @click="saveUploadFile" class="sure">确定</button>
        </div>
      </div>
    </div>
    <!-- 修改 分组-->
    <div class="selectChapter uploadDig" v-if="isEdit == true">
      <div class="title">
        编辑
        <span class="closed" @click="
            isEdit = false;
            group_id = '';
            currentGroupID = '';
          ">
          <img src="static/img/close.png" />
        </span>
      </div>
      <div class="cont">
        <div class="space-tj" style="text-align: left;">
          <label>当前分组:{{ currentGroup }}</label>
        </div>
        <ul style="height: 250px;">
          <li class="mt30">
            <el-select style="width: 100%;" v-model="group_id" filterable allow-create default-first-option
              placeholder="选择分组" @change="changeEdit">
              <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </li>
        </ul>
        <div class="mt30 baseAct width100">
          <button class="cancel" type="info" @click="
              isEdit = false;
              group_id = '';
              currentGroupID = '';
            ">取消</button>
          <button @click="EditGroup()" class="sure">确定</button>
        </div>
      </div>
    </div>
    <div class="selectChapter open-play" v-if="isOpen6 == true" style="height:820px;">
      <div class="cont" style="height:820px;">
        <div class="m-left3 bor-r" style="border-radius: 16px 0px 0px 16px;">
          <div class="szy">
            <div class="fh" @click="isOpen6 = false">
              <img src="static/img/s_back2.png" />
              返回
            </div>
            <ul>
              <template v-for="(vo, j) in listData">
                <li :key="j" :class="{ cur: play_id == vo.id }" @click="playLi(j,vo)">
                  <div class="li-img">
                    <img :src="vo.cover" />
                  </div>
                  <span style="width: 135px;display: inline-block;">{{ vo.resources_name }}</span>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="m-center44" style="border-radius: 0px 16px 0px 16px;">
          <div class="play_area" style="border-radius: 0px 16px 0px 16px;overflow:hidden;">
            <!-- 视频音频 -->
            <div id="course-player" v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" v-if="getFileType(currentZiyuan.file) == 'video'"></div>
            <div v-else-if="getFileType(currentZiyuan.file) == 'radio'">
              <div class="item-lessRadio" :style="{ 'background-image': 'url(' + bgImg + ')' }">
                <img v-if="showImg" :class="isPlayMusic ? activeClass : errorClass" src="../../../static/img/music1.png"
                  style="width: 372px;min-height: 372px;" />
                <div class="raad-box" v-else>
                  <div class="item-read" :class="{'no_mask':!currentZiyuan.is_mask!=1}" style="padding-top: 5%;">
                    <div v-for="(item, index) in read" :key="index" class="item-all">
                      <span v-if="index + 1 < read.length">
                        <span
                          :class="[currentTxt > read[index].time - 1 && currentTxt < read[index + 1].time ? 'item-color' : '']">{{ item.text }}</span>
                      </span>
                    </div>
                  </div>
                </div>
                <audio @ended="stopMusic()" @pause="stopMusic()" @play="playMusic()" id="audio" class="item-changeAudio"
                  @timeupdate="update" :src="music" controls="controls" controlslist="nodownload">Your browser does not
                  support the audio element.</audio>
              </div>
            </div>
            <!-- office文件 -->
            <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" v-else-if="
                getFileType(currentZiyuan.file) == 'excel' ||
                  getFileType(currentZiyuan.file) == 'word' ||
                  getFileType(currentZiyuan.file) == 'pdf' ||
                  getFileType(currentZiyuan.file) == 'ppt'
              " style="height:100%;">
              <iframe style="background-color: #FFFFFF;" class="course-iframe"
                :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentZiyuan.file" @loadstart="isIframeLoad=true"
                @load="isIframeLoad = false"></iframe>
            </div>
            <!-- 图片 -->
            <div v-else-if="getFileType(currentZiyuan.file) == 'image'">
              <el-carousel indicator-position="outside" :interval="100000"
                v-if="currentZiyuan.file.split(';').length > 1">
                <el-carousel-item v-for="(item, index) in currentZiyuan.file.split(';')" :key="index">
                  <img :src="item" />
                </el-carousel-item>
              </el-carousel>

              <img :src="currentZiyuan.file" v-if="currentZiyuan.file.split(';').length == 1" />
            </div>
            <template v-else-if="getFileType(currentZiyuan.file) == 'html'">
              <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)" style="height:100%;">
                <iframe style="width: 100%;height: 100%;" :src="currentZiyuan.file" @loadstart="isIframeLoad=true"
                  @load="isIframeLoad = false"></iframe>
              </div>
            </template>
            <!-- swf文件 -->
            <template v-else-if="getFileType(currentZiyuan.file) == 'swf'">
              <object :data="currentZiyuan.file" type="application/x-shockwave-flash" class="addTop">
                <param name="movie" value="demo.swf" style="width: 100%;height: 80vh;" />
                <embed :src="currentZiyuan.file" style="width: 100%;height: 80vh;" />
              </object>
            </template>
          </div>
        </div>
      </div>
      <div class="mt10 baseAct" style="margin-top: -50px;">
        <button @click="playLi(play_index - 1,listData[play_index - 1])" :disabled='play_index == 0'
          class="sure">上一页</button>
        <label>{{ play_index + 1 }}/{{ listData.length }}</label>
        <button @click="playLi(play_index + 1,listData[play_index + 1])" :disabled='play_index == (listData.length-1)'
          class="sure">下一页</button>
      </div>
      <!-- <div class="arrow-right"></div> -->
    </div>
  </div>
</template>

<script>
  var player
  import Header from '../../components/header_lecture.vue'
  import draggable from 'vuedraggable'
  export default {
    data() {
      return {
        isIframeLoad: true,
        token: localStorage.getItem('token'),
        title: '',
        title_str: '',
        title_zy_str: '',
        kind_name: '',
        kind_item_name: '',
        tip_txt: '从右侧“课程资源”或“资源中心”、“我的空间”中选择您需要的课件，自由进行排列组合，灵活备课',
        uploadUrl: this.$brid + '/api/common/oss_upload',
        upload_file_list: '',
        group_info: {
          name: '',
          id: 0,
        },
        isFirst: true,
        isSelAll: true,
        number: 0,
        bid: 0,
        p_id: 0,
        cate_id: 0,
        dir_name: '',
        tag_id: 0,
        sec_id: 0,
        zy_id: 0,
        resources_id: 0,
        school_id: 0,
        grade_id: 0,
        zy_c_id: 0,
        group_id: '',
        play_id: 0,
        play_index: 0,
        fileList: [],
        ziyuan: [],
        class_id: [],
        on_progress: false,
        attachment_ids: [],
        attachment_id: 0,
        schoolData: [],
        gradeData: [],
        classData: [],
        disabled: false,
        isOpen: false,
        isOpen2: false,
        isOpen3: false,
        isOpen4: false,
        isOpen5: false,
        isOpen6: false,
        isGroup: false,
        isGroupFile: false,
        isUploadSetFile: false,
        isUpload: false,
        newGroup: false,
        isLeftShow: false,
        courseList: [],
        currentCourse: {},
        currentZiyuan: {},
        page_s: 1,
        file_from: {
          search: '',
          page: 1,
          limit: 21,
          group_id: '',
        },
        checkedCourse: [],
        checkedZY: [],
        checkedSpaceFile: [],
        cateData: [],
        dirData: [],
        tagData: [],
        oneCheckData: [],
        secData: [],
        listData: [],
        ziyuanCate: [],
        ziyuanData: [],
        ziyuanMyData: [],
        groupList: [],
        spaceFileList: [],
        spaceUseInfo: {},
        dragOptions: {
          animation: 500,
          filter: '.add-one',
        },
        userAuth: '',
        fileName: '',
        isPlayMusic: false,
        activeClass: 'playM',
        errorClass: 'stopM',
        musicCenter: '',
        music: '',
        groupPage: 1,
        currentPage: 1,
        groupTotal: 1,
        myTotal: '',
        myCurrentPage: 1,
        isEdit: false, //修改分组
        currentGroup: '', //当前分组
        currentGroupID: '', //当前分组id
        currentGroupFile: '', //当前文件ID
        currentID: '', //当前id，判断选择分组是否相同
        currentTxt: 0, //当前歌词所在位置
        array: [], //全部歌词
        indexArray: 0, //监听高亮歌词显示
        read: [], //截取的要显示的歌词
        showImg: true, //没有歌词显示转动图片，
        bgImg: '../../../static/img/music-bg.jpg', //轮播背景图
        bgTimer: '',
        bgAllImg: ['../../../static/img/music-bg.jpg'], //当前播放歌曲轮播的背景图片
        rotation_times: 10000,
        flag: 0, //防止定时器多次执行
        imgNum: 0, //轮播图第几张
        ziyuanPage: 1,
        kind_item_chapter_id: 0,
        upFile: {
          name: ''
        },
        isShowFileList: false,
        percentage: 0,
        uploading: false,
        isGetMyZiyuan: false,
        defaultExpandedKeys: [],
      }
    },
    watch: {
      //监听时间变化
      currentTxt(newv) {
        // if (newv > 0) {
        //   var ret = this.array.findIndex((value, index, arr) => {
        //     return value.time == newv
        //   })
        //   if (ret != -1) {
        //     this.indexArray = ret
        //   }
        //   // this.read = this.array.slice(this.indexArray - 1, this.indexArray + 13);
        // }
        // if (this.indexArray > 6) {
        //   this.read = this.array.slice(this.indexArray - 5, this.indexArray + 13)
        // }
      },
    },

    created() {
      this.bid = this.$route.query.bid
      if (this.bid > 0) {
        this.getBeikeList()
      } else {
        this.addOne()
      }
      this.selectChange1(0)
      this.getParentCate()
      if (localStorage.getItem('listResources'))
        this.listData = JSON.parse(localStorage.getItem('listResources'))
      this.userAuth = JSON.parse(localStorage.getItem('userAuth'))
    },
    methods: {
      handleNodeClick(item, node, el) {
        this.isIframeLoad = true

        // this.kind_name = item.ext_name;
        if (item.type != 'folder') {
          this.resources_name = item.resources_name
          this.playLiZiyuan(0, item)
        }else{
          this.resources_name = item.list[0].resources_name
          this.playLiZiyuan(0, item.list[0])
          this.$nextTick(()=>{
            this.$refs.tree.setCurrentKey(item.list[0].id)
          })
        }
      },
      closeUpload() {
        this.isUpload = false;
        this.fileName = '';
        this.upFile = {
          name: ''
        };
        this.attachment_id = 0
        this.isShowFileList = false
        this.percentage = 0
      },
      removeFile() {
        this.isShowFileList = false
        this.percentage = 0
        this.upFile = {
          name: ''
        };
      },
      //滚动加载
      scroll() {
        const that = this
        if (this.isLastPage) {
          return
        }
        setTimeout(this.getMyZiyuanList(), 500)
      },

      playMusic() {
        this.isPlayMusic = true
        //console.log('playMusic')
        //背景开始轮播
        clearInterval(this.bgTimer)
        this.playBg()
      },
      stopMusic() {
        //console.log('stopMusic')
        //背景停止轮播
        clearInterval(this.bgTimer)
        this.isPlayMusic = false
      },

      getClose() {
        // this.ziyuanMyData[0].id=0
        // this.ziyuanCate[0].id=0
        this.isOpen4 = false
        clearInterval(this.bgTimer)
        this.isGetMyZiyuan = false
        this.ziyuanMyData = []
      },
      openCollectDiv() {
        this.openCollect()
        // this.currentZiyuan = {};
        this.handleCheckedZYChange(this.ziyuanMyData[0])
        this.getClose()
        // this.curChMyZy(0);
      },
      openCourseDig() {
        if (this.userAuth.is_course) {
          this.isOpen = true
        } else {
          this.$message.error('该模块未授权，请联系管理员')
        }
      },
      addOne() {
        if (!localStorage.getItem('isHide')) {
          this.isOpen = true
        } else {
          localStorage.removeItem('isHide')
        }
        this.checkedCourse = []
        if (this.listData.length > 0 && this.isFirst == false) {
          this.isOpen2 = true
          this.isIframeLoad = true
          this.getOneCheckList()
          this.getResourcesList()
          // this.p_id = 0;
          //  this.cate_id = 0;
          //  this.dirData = [];
        }

        this.isFirst = false
      },
      closeOpen2() {
        this.isOpen2 = false
        this.currentCourse = {}
        this.oneCheckData = []
        this.checkedCourse = []
      },

      // 下一步
      nextclick() {
        if (this.cate_id == 0) {
          this.$message.error('请选择课程')
          return
        }
        this.$api('getResource', {
          kind_item_chapter_id: this.kind_item_chapter_id,
          id: this.cate_id,
        }).then((res) => {
          if (res.code == 1) {
            this.isOpen2 = true
            this.isIframeLoad = true
            this.getOneCheckList()
            this.getResourcesList()
          } else {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      },

      //我的空间 资源选择
      clickSpaceFile(vo) {
        // vo  即为 item
        if (this.checkedSpaceFile.indexOf(vo) > -1) {
          let index = this.checkedSpaceFile.indexOf(vo)
          this.checkedSpaceFile.splice(index, 1)
        } else {
          this.checkedSpaceFile.push(vo)
        }
      },
      // 一键引用
      reference() {
        let allOptions = this.checkedCourse
        for (var i = 0; i < this.oneCheckData.length; i++) {
          var json = JSON.stringify(this.oneCheckData[i])
          allOptions.push(json)
        }
        //console.log('this.oneCheckData==>>' + JSON.stringify(this.oneCheckData))
        //console.log('allOptions==>>' + JSON.stringify(allOptions))
        this.checkedCourse = allOptions
        this.setCheckedOnly()
        this.curSelStatus()
      },
      //删除重复数据
      setCheckedOnly() {
        var arr = [] //定义一个临时数组
        for (var i = 0; i < this.checkedCourse.length; i++) {
          if (arr.indexOf(JSON.stringify(this.checkedCourse[i])) == -1) {
            arr.push(JSON.stringify(this.checkedCourse[i]))
          }
        }
        for (var i = 0; i < arr.length; i++) {
          arr[i] = JSON.parse(arr[i])
        }
        this.checkedCourse = arr
      },

      endEvent() {
        //console.log(this.listData)
      },
      //全选
      handleCheckAllChange(val) {
        let allOptions = this.checkedCourse
        for (var i = 0; i < this.secData.length; i++) {
          var json = JSON.stringify(this.secData[i])
          allOptions.push(json)
        }
        //console.log('allOptions:::==>' + JSON.stringify(allOptions))
        this.isSelAll = false
        this.checkedCourse = allOptions
        this.setCheckedOnly()
      },
      //取消全选
      handleNoCheckAllChange(val) {
        let allOptions = this.checkedCourse
        for (var i = 0; i < this.secData.length; i++) {
          var json = JSON.stringify(this.secData[i])
          //console.log('json:==::==>' + JSON.stringify(json))
          for (var j = 0; j < allOptions.length; j++) {
            if (allOptions[j] == json) {
              allOptions.splice(j, 1)
              if (j == 0) {
                allOptions = []
              }
              //console.log('json:=>>=::==>' + json)
            }
          }
        }

        this.isSelAll = true
        this.checkedCourse = allOptions
        //console.log(this.checkedCourse)
      },

      getBeikeList() {
        this.$api('resources.beikelist', {
          bid: this.bid,
        }).then((res) => {
          this.title = res.data.bclass.title
          this.listData = res.data.resource_list
          // this.class_id = res.data.bclass.class_ids.split(',');
          for (var i = 0; i < this.listData.length; i++) {
            this.listData[i].cover = this.listData[i].image_cover
            this.listData[i].resources_name = this.listData[i].bname
          }
        })
      },
      getParentCate() {
        this.$api('resources.getKindList', {}).then((res) => {
          this.cateData = res.data
          this.p_id = this.cateData[0].kind_item[0].id

          this.kind_item_name = this.cateData[0].kind_item[0].kind_item_name
          this.kind_name = this.cateData[0].kind_name

          this.getDirList()
        })
      },

      getDirList() {
        this.dirData = []
        this.$api('resources.getDirList', {
          kind_item_id: this.p_id,
        }).then((res) => {
          this.dirData = res.data
          //console.log(this.dirData)
          this.getTagsList()
        })
      },
      getTagsList() {
        this.tagData = []
        this.tag_id = 0
        this.$api('resources.getTagsList', {
          class_id: this.p_id,
          token: this.token,
        }).then((res) => {
          this.tagData = res.data
          this.tag_id = this.tagData[0].tag_id
        })
      },
      getOneCheckList() {
        this.$api('resources.oneCheck', {
          id: this.cate_id,
          tags: this.tag_id,
        }).then((res) => {
          this.oneCheckData = res.data.list
        })
      },
      getResourcesList() {
        this.videoUrl = ''
        this.$api('resources.getResourcesList', {
          id: this.cate_id,
          tags: this.tag_id,
        }).then((res) => {
          this.secData = res.data
          if (this.secData.length > 0) {
            this.videoUrl = this.secData[0].file
            this.handleCheckedChange(this.secData[0])
            this.curSelStatus()
          }
        })
      },

      curSelStatus() {
        let k = 0
        for (var i = 0; i < this.secData.length; i++) {
          var json = JSON.stringify(this.secData[i])
          for (var j = 0; j < this.checkedCourse.length; j++) {
            if (this.checkedCourse[j] == json) {
              k++
            }
          }
        }
        if (k == this.secData.length) {
          this.isSelAll = false
        } else {
          this.isSelAll = true
        }
        //console.log('curSelStatus==>k::' + k)
        //console.log('curSelStatus==.checkedCourse::' + this.checkedCourse)
      },
      handleChecked(index, item) {
        this.curSelStatus()
      },
      handleCheckedChange(item) {
        this.currentCourse = item
        this.rotation_times = item.rotation_times
        var that = this
        //console.log(item)
        var audio = document.querySelector('audio')
        if (audio != null) {
          audio.currentTime = 0
        }
        this.indexArray = 0
        this.currentTxt = 0
        this.sec_id = item.id
        this.isPlayMusic = false
        clearInterval(this.bgTimer)
        this.bgTimer = null
        this.flag = 0
        this.imgNum = 1

        if (this.getFileType(item.file) == 'video') {
          this.aliplay(item.file)
        } else if (this.getFileType(item.file) == 'radio') {
          this.music = item.file
          //是否有歌词，有歌词进行处理
          if (item.lyric_text && item.lyric_text.trim() != '') {
            this.array = []
            this.showImg = false
            let lyricArr = item.lyric_text.split('[').slice(1) // 先以[进行分割
            let lrcObj = {}
            lyricArr.forEach((item) => {
              var data = {}
              let arr = item.split(']') // 再分割右括号
              // 时间换算成秒
              let m = parseInt(arr[0].split(':')[0])
              let s = parseInt(arr[0].split(':')[1])
              arr[0] = m * 60 + s
              data.time = arr[0]
              if (arr[1] != '\n') {
                // 去除歌词中的换行符
                lrcObj[arr[0]] = arr[1]
                data.text = arr[1]
              }
              this.array.push(data)
            })

            this.read = this.array.slice(0, this.indexArray + 13)
            //console.log(this.read)
          } else {
            this.read = []
            this.showImg = true
          }
          if (item.rotation_img != undefined && item.rotation_img != '') {
            //console.log(item.rotation_img)
            this.bgAllImg = item.rotation_img_text
            this.bgImg = this.bgAllImg[0]
            this.showImg = false
          } else {
            this.bgImg = '../../../static/img/music-bg.jpg'
            this.bgAllImg = []
            clearInterval(this.bgTimer)
            this.flag = 0
          }
          if (this.flag == 1) {
            return
          }
          //播放背景
          this.playBg()
        } else if (this.getFileType(item.file == 'other')) {
          this.$message.error('文件格式不对，无法播放')
        }
      },
      handleCheckedZY(tit_zy) {
        this.title_zy_str = tit_zy
      },
      goCourse() {
        this.$router.push('/courseList')
      },
      refresh() {},
      //获取当前音频播放时间
      update() {
        var audio = document.querySelector('audio');
        if (audio != null) {
          this.currentTxt = parseInt(audio.currentTime);
          this.array.forEach((element, index) => {
            if (index < this.array.length - 1) {
              if (this.currentTxt > this.array[index].time - 1 && this.currentTxt < this.array[index + 1].time) {
                this.indexArray = index
              }
            }
          });
          if (this.indexArray > 6) {
            this.read = this.array.slice(this.indexArray - 5, this.indexArray + 13);
          } else {
            this.read = this.array.slice(0, this.indexArray + 13)
          }
        }
      },

      handleCheckedZYChange(item) {
        //console.log('item222222', item)
        var audio = document.querySelector('audio')
        if (audio != null) {
          audio.currentTime = 0
        }
        this.indexArray = 0
        this.currentTxt = 0
        this.zy_id = item.id
        this.currentZiyuan = item
        this.rotation_times = item.rotation_times
        this.isPlayMusic = false
        clearInterval(this.bgTimer)
        this.bgTimer = null
        this.flag = 0
        this.imgNum = 1
        if (this.getFileType(item.file) == 'video') {
          this.aliplay(item.file)
        } else if (this.getFileType(item.file) == 'radio') {
          this.music = item.file
          //是否有歌词，有歌词进行处理
          if (item.lyric_text && item.lyric_text.trim() != '') {
            this.array = []
            this.showImg = false
            let lyricArr = item.lyric_text.split('[').slice(1) // 先以[进行分割
            let lrcObj = {}
            lyricArr.forEach((item) => {
              var data = {}
              let arr = item.split(']') // 再分割右括号
              // 时间换算成秒
              let m = parseInt(arr[0].split(':')[0])
              let s = parseInt(arr[0].split(':')[1])
              arr[0] = m * 60 + s
              data.time = arr[0]
              if (arr[1] != '\n') {
                // 去除歌词中的换行符
                lrcObj[arr[0]] = arr[1]
                data.text = arr[1]
              }
              this.array.push(data)
            })

            this.read = this.array.slice(0, this.indexArray + 13)
            //console.log(this.read)
          } else {
            this.read = []
            this.showImg = true
          }
          if (
            item.rotation_img_text != '' &&
            item.rotation_img_text != undefined
          ) {
            //console.log(item.rotation_img_text)
            this.bgAllImg = item.rotation_img_text
            this.bgImg = this.bgAllImg[0]
            this.showImg = false
          } else {
            this.bgImg = '../../../static/img/music-bg.jpg'
            this.bgAllImg = []
            clearInterval(this.bgTimer)
            this.flag = 0
          }
          if (this.flag == 1) {
            return
          }
          //播放背景
          this.playBg()
        } else if (this.getFileType(item.file == 'other')) {
          this.$message.error('文件格式不对，无法播放')
        }
      },
      // 打开课程
      openCourse(index, item) {
        if (this.checkedCourse.indexOf(item.id) < 0) {
          this.listData[index] = item
        } else {
          this.listData[index] = {}
          console.info('no')
        }
      },
      playLiZiyuan(index, item) {
        //console.log('item-TMD', item)
        let formData = {
          token: localStorage.getItem('token'),
          id: item.id,
        }
        this.$api('ziyuan.setCount', formData)
        var audio = document.querySelector('audio')
        if (audio != null) {
          audio.currentTime = 0
        }
        this.play_index = index
        this.indexArray = 0
        this.currentTxt = 0
        this.zy_id = item.id
        this.currentZiyuan = item
        this.play_id = this.currentZiyuan.id
        this.isPlayMusic = false
        clearInterval(this.bgTimer)
        this.bgTimer = null
        this.flag = 0
        this.imgNum = 1
        if (this.getFileType(item.file) == 'video') {
          this.aliplay(item.file)
        } else if (this.getFileType(item.file) == 'radio') {
          this.music = item.file
          //是否有歌词，有歌词进行处理
          if (item.lyric_text && item.lyric_text.trim() != '') {
            this.array = []
            this.showImg = false
            let lyricArr = item.lyric_text.split('[').slice(1) // 先以[进行分割
            let lrcObj = {}
            lyricArr.forEach((item) => {
              var data = {}
              let arr = item.split(']') // 再分割右括号
              // 时间换算成秒
              let m = parseInt(arr[0].split(':')[0])
              let s = parseInt(arr[0].split(':')[1])
              arr[0] = m * 60 + s
              data.time = arr[0]
              if (arr[1] != '\n') {
                // 去除歌词中的换行符
                lrcObj[arr[0]] = arr[1]
                data.text = arr[1]
              }
              this.array.push(data)
            })

            this.read = this.array.slice(0, this.indexArray + 13)
            //console.log(this.read)
          } else {
            this.read = []
            this.showImg = true
          }
          if (item.rotation_img != undefined && item.rotation_img != '') {
            //console.log(item.rotation_img)
            this.bgAllImg = item.rotation_img_text
            this.bgImg = this.bgAllImg[0]
            this.showImg = false
          } else {
            this.bgImg = '../../../static/img/music-bg.jpg'
            this.bgAllImg = []
            clearInterval(this.bgTimer)
            this.flag = 0
          }
          if (this.flag == 1) {
            return
          }
          //播放背景
          this.playBg()
        }
      },

      playLi(index, item) {
        if (player) {
          player.dispose()
          player = null
        }
        //console.log('item-TMD', item)
        let formData = {
          token: localStorage.getItem('token'),
          id: item.id,
        }
        this.$api('ziyuan.setCount', formData)
        var audio = document.querySelector('audio')
        if (audio != null) {
          audio.currentTime = 0
        }
        this.play_index = index
        this.indexArray = 0
        this.currentTxt = 0
        this.zy_id = item.id
        this.currentZiyuan = item
        this.play_id = this.currentZiyuan.id
        this.isPlayMusic = false
        clearInterval(this.bgTimer)
        this.bgTimer = null
        this.flag = 0
        this.imgNum = 1
        if (this.getFileType(item.file) == 'video') {
          this.aliplay(item.file)
        } else if (this.getFileType(item.file) == 'radio') {
          this.music = item.file
          //是否有歌词，有歌词进行处理
          if (item.lyric_text && item.lyric_text.trim() != '') {
            this.array = []
            this.showImg = false
            let lyricArr = item.lyric_text.split('[').slice(1) // 先以[进行分割
            let lrcObj = {}
            lyricArr.forEach((item) => {
              var data = {}
              let arr = item.split(']') // 再分割右括号
              // 时间换算成秒
              let m = parseInt(arr[0].split(':')[0])
              let s = parseInt(arr[0].split(':')[1])
              arr[0] = m * 60 + s
              data.time = arr[0]
              if (arr[1] != '\n') {
                // 去除歌词中的换行符
                lrcObj[arr[0]] = arr[1]
                data.text = arr[1]
              }
              this.array.push(data)
            })

            this.read = this.array.slice(0, this.indexArray + 13)
            //console.log(this.read)
          } else {
            this.read = []
            this.showImg = true
          }
          if (item.rotation_img != undefined && item.rotation_img != '') {
            //console.log(item.rotation_img)
            this.bgAllImg = item.rotation_img_text
            this.bgImg = this.bgAllImg[0]
            this.showImg = false
          } else {
            this.bgImg = '../../../static/img/music-bg.jpg'
            this.bgAllImg = []
            clearInterval(this.bgTimer)
            this.flag = 0
          }
          if (this.flag == 1) {
            return
          }
          //播放背景
          this.playBg()
        }
      },

      playBg() {
        if (this.bgAllImg.length > 1) {
          this.bgTimer = setInterval(() => {
            this.flag = 1
            this.bgImg = this.bgAllImg[this.imgNum]
            if (this.imgNum == this.bgAllImg.length - 1) {
              this.imgNum = -1
            }
            this.imgNum++
          }, this.rotation_times || 10000)
        } else {
          clearInterval(this.bgTimer)
        }
      },

      openCh(index, item) {
        this.kind_name = item.kind_name
        if (this.cateData[index].id == 1) {
          this.cateData[index].id = 0
        } else {
          this.cateData[index].id = 1
        }
      },
      //获取下级资源
      openChZy(index, item) {
        //console.log('获取下级')
        if (this.ziyuanCate[index].id == 1) {
          this.ziyuanCate[index].id = 0
        } else {
          this.ziyuanCate[index].id = 1
        }
        this.$api('ziyuan.getKindItemList', {
          id: item.curid,
        }).then((res) => {
          this.ziyuanCate[index].kind_item = res.data.data

          if (this.ziyuanCate[0].kind_item != undefined) {
            if (this.ziyuanCate[0].kind_item.length != 0) {
              this.zy_c_id = this.ziyuanCate[0].kind_item[0].id
            }
          }

          this.getZiyuanList()
        })
      },
      takeBclassInfo() {
        this.disabled = true
        if (!this.title.trim()) {
          this.$message.error('请输入标题')
          this.disabled = false
          return
        }
        if (this.listData.length > 50) {
          this.$message.error('资源最多只能选择 50个')
          this.disabled = false
          return
        }
        this.attachment_ids = []
        for (var i = 0; i < this.listData.length; i++) {
          var json = this.listData[i]
          if (json.att_type) {
            this.attachment_ids.push(json.att_type)
          }
        }

        if (this.attachment_ids.length == 0) {
          this.$message.error('请输入选择资源')
          this.disabled = false
          return
        }
        this.$api('resources.takeBclassInfo', {
          id: this.bid,
          title: this.title,
          attachment_ids: this.attachment_ids.join(','),
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success('保存成功，可在下方查看备课包')
            this.listData = [];
            (this.title = ''), (this.class_id = '')
            this.setOnly()
            this.$router.push('/bkblist')
          } else if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
          this.disabled = false
        })
      },

      selectChange1(val) {
        //console.log('select')
        let id = 0
        this.$api('grades.classlist', {
          id: id,
        }).then((res) => {
          this.classData = res.data
          // this.class_id[0] = this.classData[0].class_id;
        })
      },

      delLi(index, id) {
        //console.log('delLi======>>>')
        //console.log(this.listData)
        this.listData.splice(index, 1)
        this.setOnly()
      },
      goDetail(index, item) {
        this.resources = item.id
        this.isOpen6 = true
        this.isIframeLoad = true
        this.playLi(index, item)
      },
      selectCh(index, item, vo) {
        this.kind_item_name = item.kind_item_name
        this.kind_name = vo.kind_name
        this.p_id = item.id
        this.getDirList()
      },
      fillter(index, item) {
        //console.log(item.id + 'fillter')

        this.cate_id = item.id
        this.kind_item_chapter_id = item.kind_item_chapter_id
        this.dir_name = item.dir_name
      },
      //切换tag
      selTag(index, id) {
        this.tag_id = id
        this.getResourcesList()
      },
      selSec(index, item) {
        this.sec_id = id
        //  this.getDirList();
      },
      checkSpaceFile(index, item) {
        //console.log(index)
        if (this.spaceFileList[index].status == '1') {
          this.spaceFileList[index].status = '0'
          this.spaceFileList[index].file_name = item.file_name + '...'
        } else {
          this.spaceFileList[index].status = '1'
          this.spaceFileList[index].file_name = item.file_name.replace('.', '')
        }
        //console.log('checkSpaceFile:::')
        //console.log(this.spaceFileList)
      },

      handleCurrentChange(e) {
        this.currentPage = e
        this.getGroupList(this.currentPage)
      },
      getGroupList(page) {
        if (page == undefined) {
          page = 1
        } else {
          this.currentPage = page
        }
        this.$api('space.groupList', {
          page: page,
          limit: 7,
        }).then((res) => {
          this.groupList = res.data.list.data
          this.groupTotal = res.data.list.last_page
          //console.log('this.groupList::=====>>')
          //console.log(res.data)
          // this.group_id = this.groupList[0].id;
          // this.file_from.group_id = this.groupList[0].id;
        })
      },
      //修改分组
      EditGroup() {
        //console.log('edit')
        //console.log()
        if (this.currentGroupID == '') {
          this.$message('请选择分组')
          return
        }
        if (this.currentID == this.currentGroupID) {
          this.$message('请选择不同的分组')
          return
        }
        let form = {
          token: this.token,
          id: this.currentGroupFile,
          group_id: this.currentGroupID,
        }

        this.$api('grades.transgroup', form).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg)
          } else {
            this.$message({
              message: res.msg,
              type: 'warning',
              duration: 1000,
            })
          }
          this.group_id = ''
          this.currentGroupID = ''
          this.getSpaceFileList()
          this.isEdit = false
        })
      },
      //修改分组下拉框
      changeEdit(e) {
        this.currentGroupID = e
      },
      //修改分组名字
      changeGroup(items) {
        this.currentID = items.group_id
        var group = this.groupList.find((item, index) => {
          return items.group_id == item.group_id
        })
        if (group == undefined) {
          this.currentGroup = '无'
          this.currentGroupFile = items.id
        } else {
          this.currentGroup = group.name
          this.currentGroupFile = items.id
        }
        this.isEdit = true
        //console.log('changeGroup')
      },

      saveGroup() {
        if (!this.group_info.name.trim()) {
          this.$message.error('请输入分组名称')
          return
        }
        let url = this.group_info.id == 0 ? 'space.addGroup' : 'space.editGroup'
        this.$api(url, this.group_info).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg)
            this.getGroupList()
            this.newGroup = false
            this.group_info.name = ''
          } else if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      },
      editGroupName(item) {
        this.group_info = {
          name: item.name,
          id: item.id,
        }
        this.newGroup = true
      },

      delGroupName(id) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            this.$api('space.delGroup', {
              id: id,
            }).then((res) => {
              if (res.code == 1) {
                this.$message.success(res.msg)
                this.form = {}
                this.isAdd = false
                this.getGroupList()
              } else if (res.code == 0) {
                this.$message({
                  message: res.msg,
                  type: 'warning',
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },
      delFile(vo) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            this.$api('space.userDelFile', {
              id: vo.id,
            }).then((res) => {
              if (res.code == 1) {
                this.$message.success(res.msg)
                this.getSpaceFileList(1)
                this.getSpaceUseInfo()
              } else if (res.code == 0) {
                this.$message({
                  message: res.msg,
                  type: 'warning',
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },

      // 阿里云视频播放
      aliplay(file) {
        if (player) {
          player.dispose()
        }
        this.isIframeLoad = true
        const saveTime = function (memoryVideo, currentTime) {
          localStorage.setItem(memoryVideo, currentTime)
        }

        const getTime = function (memoryVideo) {
          return localStorage.getItem(memoryVideo)
        }
        this.$nextTick(() => {
          player = new Aliplayer({
              id: 'course-player',
              source: file,
              width: '100%',
              height: '100%',
              autoplay: true,
              isLive: false,
              components: [{
                name: 'MemoryPlayComponent',
                type: AliPlayerComponent.MemoryPlayComponent,
                args: [false, getTime, saveTime],
              }, ],
              skinLayout: [{
                name: 'controlBar',
                align: 'blabs',
                x: 0,
                y: 0,
                children: [{
                    name: 'progress',
                    align: 'blabs',
                    x: 0,
                    y: 44
                  },
                  {
                    name: 'playButton',
                    align: 'tl',
                    x: 15,
                    y: 12
                  },
                  {
                    name: 'timeDisplay',
                    align: 'tl',
                    x: 10,
                    y: 7
                  },
                  {
                    name: 'fullScreenButton',
                    align: 'tr',
                    x: 10,
                    y: 12
                  },
                  {
                    name: 'volume',
                    align: 'tr',
                    x: 5,
                    y: 10
                  }
                ]
              }]
            },
            function (player) {
              //console.log('The player is created')
            }
          )
          player.on('ready',()=>{
            this.isIframeLoad = false
            // //console.log('加载成功')
          })
        })
      },
      getFileType(fileName) {
        // 后缀获取
        let suffix = ''
        // 获取类型结果
        let result = ''
        try {
          const flieArr = fileName.split('.')
          suffix = flieArr[flieArr.length - 1]
        } catch (err) {
          suffix = ''
        }
        // fileName无后缀返回 false
        if (!suffix) {
          return false
        }
        suffix = suffix.toLocaleLowerCase()
        // 图片格式
        const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
        // 进行图片匹配
        result = imglist.find((item) => item === suffix)
        if (result) {
          return 'image'
        }
        // 匹配txt
        const txtlist = ['txt']
        result = txtlist.find((item) => item === suffix)
        if (result) {
          return 'txt'
        }
        // 匹配 excel
        const excelist = ['xls', 'xlsx']
        result = excelist.find((item) => item === suffix)
        if (result) {
          return 'excel'
        }
        // 匹配 word
        const wordlist = ['doc', 'docx']
        result = wordlist.find((item) => item === suffix)
        if (result) {
          return 'word'
        }
        // 匹配 pdf
        const pdflist = ['pdf']
        result = pdflist.find((item) => item === suffix)
        if (result) {
          return 'pdf'
        }
        // 匹配 ppt
        const pptlist = ['ppt', 'pptx']
        result = pptlist.find((item) => item === suffix)
        if (result) {
          return 'ppt'
        }
        // 匹配 视频
        const videolist = [
          '3gp',
          'asf',
          'avi',
          'dat',
          'dv',
          'flv',
          'f4v',
          'gif',
          'm2t',
          'm3u8',
          'm4v',
          'mj2',
          'mjepg',
          'mkv',
          'mov',
          'mp4',
          'mpe',
          'mpg',
          'mpeg',
          'mts',
          'ogg',
          'qt',
          'rm',
          'rmab',
          'ts',
          'vob',
          'wmv',
          'webm',
        ]
        result = videolist.find((item) => item === suffix)
        if (result) {
          return 'video'
        }
        // 匹配 音频
        const radiolist = [
          'aac',
          'ac3',
          'acm',
          'amr',
          'ape',
          'caf',
          'flac',
          'm4a',
          'mp3',
          'ra',
          'wav',
          'wma',
        ]
        result = radiolist.find((item) => item === suffix)
        if (result) {
          return 'radio'
        }
        // 匹配 swf
        const swflist = ['swf']
        result = swflist.find((item) => item === suffix)
        if (result) {
          return 'swf'
        }
        //匹配html
        const htmllist = ['html']
        result = htmllist.find((item) => item === suffix)
        if (result) {
          return 'html'
        }
        // 其他 文件类型
        return 'other'
      },

      setOnly() {
        var arr = [] //定义一个临时数组
        for (var i = 0; i < this.listData.length; i++) {
          if (arr.indexOf(JSON.stringify(this.listData[i])) == -1) {
            arr.push(JSON.stringify(this.listData[i]))
          }
        }
        for (var i = 0; i < arr.length; i++) {
          arr[i] = JSON.parse(arr[i])
        }
        this.listData = arr
        localStorage.setItem('listResources', JSON.stringify(this.listData))

        if (this.listData.length > 0) {
          this.title_str = this.listData[0].title_str
        } else {
          this.title_str = ''
        }
      },
      goNext() {
        this.isOpen = false
        this.isOpen2 = false
        //console.log('this.checkedCourse====>>>')
        //console.log(this.checkedCourse)

        let checkedCourse = []
        for (var i = 0; i < this.checkedCourse.length; i++) {
          if (this.checkedCourse[i]) {
            this.checkedCourse[i] = JSON.parse(this.checkedCourse[i])
            this.checkedCourse[i].shownum = 0
            this.checkedCourse[i].createtime = 0
            this.checkedCourse[i].updatetime = 0
            this.checkedCourse[i].cover = this.checkedCourse[i].image
            this.checkedCourse[i].att_type = 't0_' + this.checkedCourse[i].id
            this.checkedCourse[i].title_str =
              this.kind_name + '  ' + this.kind_item_name
          } else {
            this.checkedCourse.splice(i, 1)
          }
        }
        this.listData = this.listData.concat(this.checkedCourse)
        //console.log('this.listData====>>>' + JSON.stringify(this.listData))
        this.checkedCourse = []
        this.isSelAll = true
        if (this.title.length == 0) {
          this.title = this.dir_name
          this.title_str = this.kind_name + '  ' + this.kind_item_name
        }
        this.setOnly()
      },
      goNext3() {
        if (this.checkedZY.length == 0) {
          this.$message.error('请选择资源')
          return
        }
        this.isOpen3 = false
        this.isOpen4 = false
        for (var i = 0; i < this.checkedZY.length; i++) {
          this.checkedZY[i] = JSON.parse(this.checkedZY[i])
          this.checkedZY[i].shownum = 0
          this.checkedZY[i].createtime = 0
          this.checkedZY[i].updatetime = 0
          this.checkedZY[i].cover = this.checkedZY[i].image
          this.checkedZY[i].att_type = 't1_' + this.checkedZY[i].id
          this.checkedZY[i].title_str = this.title_zy_str
        }
        this.listData = this.listData.concat(this.checkedZY)
        this.checkedZY = []
        this.setOnly()
      },
      goNext4() {
        this.isOpen3 = false
        this.isOpen4 = false
        //console.log('checkedZY1111', this.checkedZY)
        for (var i = 0; i < this.checkedZY.length; i++) {
          this.checkedZY[i] = JSON.parse(this.checkedZY[i])
          this.checkedZY[i].shownum = 0
          this.checkedZY[i].createtime = 0
          this.checkedZY[i].updatetime = 0
          this.checkedZY[i].cover = this.checkedZY[i].image
          this.checkedZY[i].att_type = 't1_' + this.checkedZY[i].id
          this.checkedZY[i].title_str = this.title_zy_str
        }
        this.listData = this.listData.concat(this.checkedZY)
        this.checkedZY = []
        this.setOnly()
      },
      selectSpaceFile() {
        let checkedSpaceFile = []
        for (var i = 0; i < this.checkedSpaceFile.length; i++) {
          this.checkedSpaceFile[i].resources_name =
            this.checkedSpaceFile[i].file_name
          this.checkedSpaceFile[i].cover = this.checkedSpaceFile[i].image_cover
          this.checkedSpaceFile[i].att_type = 't2_' + this.checkedSpaceFile[i].id
          this.checkedSpaceFile[i].title_str = '我的空间'
        }
        this.listData = this.listData.concat(this.checkedSpaceFile)
        this.setOnly()
        this.checkedSpaceFile = []
        this.isOpen5 = false
      },

      openSpace() {
        this.isOpen5 = true
        this.getGroupList()
        this.getSpaceFileList()
        this.getSpaceUseInfo()
      },
      openZiyuan() {
        // this.openCollectDiv();
        if (this.userAuth.is_resource) {
          if (this.isGetMyZiyuan) {
            return
          }
          this.isGetMyZiyuan = true
          this.isIframeLoad = true
          this.ziyuanPage = 1
          this.isLastPage = false
          // this.getMyZiyuanList()
          this.ziyuanMyData = []
          this.$api('ziyuan.getbeiMyZiyuanList', {
            page: 1,
          }).then((res) => {
            this.isGetMyZiyuan = false
            this.ziyuanMyData = res.data
            this.isOpen4 = true
            this.$nextTick(() => {
              if (res.data.length) {
                this.defaultExpandedKeys = [res.data[0].id]
                if (res.data[0].type == 'folder') {
                  this.playLiZiyuan(0, res.data[0].list[0])
                  this.$refs.tree.setCurrentKey(res.data[0].list[0].id)
                } else {
                  this.playLiZiyuan(0, res.data[0])
                  this.$refs.tree.setCurrentKey(res.data[0].id)
                }
              } else {
                this.defaultExpandedKeys = []
              }

            })
          })
          // this.getZiyuanCate();
        } else {
          this.$message.error('该模块未授权，请联系管理员')
        }
      },
      openCollect() {
        this.isOpen4 = true
        this.isIframeLoad = true
        this.getMyZiyuanList()
      },
      openGroup() {
        this.isGroup = true
      },
      getZiyuanCate() {
        this.$api('ziyuan.getKindList', {}).then((res) => {
          this.ziyuanCate = res.data
          for (var i = 0; i < this.ziyuanCate.length; i++) {
            this.ziyuanCate[i].curid = this.ziyuanCate[i].id
            this.openChZy(i, this.ziyuanCate[i])
          }
        })
      },
      getZiyuanList() {
        if (this.zy_c_id != undefined) {
          this.$api('ziyuan.getZiyuanList', {
            id: this.zy_c_id,
            page: 1,
            limit: 200,
          }).then((res) => {
            // if (res.data.data.data) {
            this.ziyuanData = res.data.data.data
            // }
            this.statisticsPlay(this.ziyuanData[0])
            this.handleCheckedZYChange(this.ziyuanData[0])
          })
        }
      },
      selectZY(index, id, title_str) {
        this.zy_c_id = id
        this.title_zy_str = title_str
        this.getZiyuanList()
      },
      getMyZiyuanList() {
        //console.log('aaaaaa')
        if (this.isGetMyZiyuan) {
          return
        }
        this.isGetMyZiyuan = true
        this.ziyuanPage++
        //console.log(this.ziyuanPage)
        this.$api('ziyuan.getbeiMyZiyuanList', {
          // id: this.zy_c_id,
          page: this.ziyuanPage,
        }).then((res) => {
          this.isGetMyZiyuan = false
          this.ziyuanMyData = this.ziyuanMyData.concat(res.data)
          // if (this.ziyuanPage == res.data.last_page) {
          //   this.isLastPage = true
          // }
          // for (var i = 0; i < this.ziyuanMyData.length; i++) {
          //   this.ziyuanMyData[i].curid = this.ziyuanMyData[i].ziyuan.id;
          //   this.openChMyZy(i, this.ziyuanMyData[i].ziyuan);
          // }
        })
      },
      openChMyZy(index, item) {
        this.currentZiyuan = {}
        // if (this.ziyuanMyData[index].id == 1) {
        //   this.ziyuanMyData[index].id = 0;
        // } else {
        //   this.ziyuanMyData[index].id = 1;
        // }
        // if (item.kind_item_id > 0) {
        //   this.$api('ziyuan.getZiyuanList', { id: item.id, page: 1, limit: 200 }).then(res => {
        //     this.ziyuanMyData = res.data.data.data;
        // this.ziyuanMyData[index].kind_item = res.data.data.data;
        // //console.log(this.ziyuanMyData[0].kind_item[0]);
        this.statisticsPlay(this.ziyuanMyData[index])
        this.handleCheckedZYChange(this.ziyuanMyData[index])
        // });
        // }
        // this.openChMyZy(0 );
      },
      curChMyZy(index) {
        //console.log(this.ziyuanMyData[index].kind_item[0])
        this.statisticsPlay(this.ziyuanMyData[index].kind_item[0])
        this.handleCheckedZYChange(this.ziyuanMyData[index].kind_item[0])
      },

      handleMyCurrentChange(e) {
        this.file_from.page = e
        this.getSpaceFileList()
      },
      getSpaceFileList(type) {
        if (type == 1) {
          this.file_from.page = 1
        } else if (type == 2) {
          this.file_from.page = this.myTotal
        }
        this.$api('space.spaceFileList', this.file_from).then((res) => {
          this.spaceFileList = res.data.data
          this.myTotal = res.data.last_page
          //console.log()
          //console.log('this.spaceFileList::=====>>')
          //console.log(this.spaceFileList)
        })
      },
      getSpaceUseInfo() {
        this.$api('space.spaceUseInfo', {}).then((res) => {
          this.spaceUseInfo = res.data
          this.number =
            Number(this.spaceUseInfo.use) / Number(this.spaceUseInfo.all)
        })
      },
      saveUploadFile() {
        if (this.on_progress == true) {
          this.$message({
            type: 'warning',
            message: '文件正在上传中，请耐心等候',
          })
          return
        }
        if (this.fileName == '') {
          this.$message({
            type: 'warning',
            message: '未选择文件',
          })
          return
        }
        this.$api('space.updSpaceFile', {
          group_id: this.group_id,
          attachment_id: this.attachment_id,
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg)
            this.getSpaceFileList()
            this.isUpload = false
            this.getSpaceUseInfo()
            this.fileName = ''
            this.upload_file_list = res.data.name
            if (this.isUploadSetFile == true) {
              let item = res.data
              item.resources_name = item.file_name
              item.cover = item.image_cover
              item.att_type = 't2_' + item.id
              this.listData = this.listData.concat(item)
              this.setOnly()
            }
          } else if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      },
      handleUpProgress(event, file, fileList) {
        //console.log('event', event)
        //console.log('file', file)
        //console.log('fileList', fileList)
        if (event.percent == 100) {
          this.percentage = 99
          this.uploading = true
        } else {
          this.percentage = parseInt(event.percent)
        }
        this.on_progress = true
      },
      beforeUpload(file) {
        //console.log('before')
        //console.log(file.size)
        //console.log(this.getFileType(file.name))
        if (file.size > 200000000) {
          this.$message({
            message: '文件过大，请控制在200M以内',
            type: 'warning',
          })
          return false
        }

        if (this.getFileType(file.name) == 'other') {
          this.$message({
            message: '文件格式不正确，无法上传',
            type: 'warning',
          })
          return false
        }
        this.upFile = file
      },
      handleUpSuccess(res, fileList) {
        this.on_progress = false
        this.uploading = false
        this.upFile = {
          name: ''
        }
        this.isShowFileList = true
        //console.log('handleUpSuccess====>>>')
        //console.log(res)
        //console.log(fileList[0])
        if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning',
          })
          this.fileList = []
          this.fileName = ''
          return
        }
        this.fileName = res.data.name
        this.attachment_id = res.data.attachment_id
        this.saveUploadFile()
      },
      selectLessons() {
        this.$router.push('/selectChapter')
      },
      goLessons() {
        this.$router.push('/lessonsList')
      },
      goRes() {
        this.$router.push('/selectChapter3')
      },
      goBkb() {
        if (this.listData.length > 0) {
          this.$confirm('退出将不保存当前备课数据，是否确定退出?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
            .then(() => {
              localStorage.setItem('listResources', '')
              this.$router.push('/bkblist')
            })
            .catch(() => {})
        } else {
          this.$router.push('/bkblist')
        }
      },
      goHome() {
        if (this.listData.length > 0) {
          this.$confirm('退出将不保存当前备课数据，是否确定退出?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
            .then(() => {
              localStorage.setItem('listResources', '')
              // this.$router.push(localStorage.getItem('jump_path'))
              // this.$router.go(-1)
              this.$router.push('/lecture')
            })
            .catch(() => {})
        } else {
          // this.$router.push(localStorage.getItem('jump_path'))
           this.$router.push('/lecture')
        }
        // if (localStorage.getItem('jump_path') == '/index') {
        //   this.$router.push('/index');
        // } else if (localStorage.getItem('jump_path') == '/lecture') {
        //   this.$router.push('/lecture');
        // } else if (localStorage.getItem('jump_path') == '/train') {
        //   this.$router.push('/train');
        // }
      },
      goBack() {
        if (this.listData.length > 0) {
          this.$confirm('退出将不保存当前备课数据，是否确定退出?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
            .then(() => {
              localStorage.setItem('listResources', '')
              window.history.back()
              history.pushState(null, null, document.URL)
            })
            .catch(() => {})
        } else {
          window.history.back()
          history.pushState(null, null, document.URL)
        }
      },
      // 资源中心统计
      statisticsPlay(item) {
        this.zy_id = item.id
        let formData = {
          token: localStorage.getItem('token'),
          id: item.id,
        }
        this.$api('ziyuan.setCount', formData)
      },
    },
    mounted() {
      if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL)
        window.addEventListener('popstate', this.goBack, false)
      }
    },
    destroyed() {
      window.removeEventListener('popstate', this.goBack, false)
    },

    components: {
      Header,
      draggable,
    },
  }

</script>

<style lang="scss" scoped>
  /deep/ .el-input__inner {
    height: 36px;
    line-height: 35px;
    outline: 0;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .stopM {
    animation: rotate 3s linear infinite;
    animation-play-state: paused;
  }

  .playM {
    animation: rotate 3s linear infinite;
    animation-play-state: running;
  }

  .item-bg {
    background: no-repeat;
    background-size: cover;
  }

  .item-read {
    position: inherit;
    height: 85%;
    padding-bottom: 3%;
    width: 70%;
    border-radius: 12px;
  }

  .item-all {
    padding: 15px;
    font-size: 18px;
  }

  .item-color {
    color: #fff;
    font-size: 26px;
  }

  .m-right3 .resources_name {
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // display: inline-block;
    margin-left: 6px;
  }

  .selectChapter .tips {
    font-size: 18px;
    font-weight: bold;
    line-height: 0px;
    color: #ffffff;
    opacity: 1;
    position: absolute;
    top: 0px;
    right: 156px;
  }

  .operation_group {
    // padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .t_empty_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .play_area {
    // height: calc(100% - 20px);
  }

  .m-left2 {
    overflow: hidden;
  }

  .course-iframe,
  .addPad {
    // width: 1400px !important;
    // height: 700px !important;
    // position: absolute;
    margin: 0;
    // left: -118px;
    // right: 0;
    // top: -28px;
    // bottom: 0;
  }

  .item-classRadio {
    height: 676px !important;
  }

  .specialVideo {
    position: relative;
  }

  .specialVideo>ul {
    position: absolute;
    z-index: 999;
  }

  .specialVideo>.play_area {
    height: 666px !important;
    position: absolute;
    width: 1170px;
    top: 32px;
    left: -1px;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node__content {
    // width: 200px;
    height: 43px;
    margin: 1px 0;
    line-height: 20px;
    font-size: 16px;
  }

  .el-tree /deep/ .is-current>.el-tree-node__content {
    background: #c9ffef !important;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 20px;
    color: #222222;
  }

  .el-tree /deep/ .el-tree-node__label {
    display: inline-block;
    width: 72%;
  }

  .el-tree /deep/ .el-tree-node__children .el-tree-node__content {
    width: 220px;
    height: 34px;
    font-size: 16px;
    font-family: PingFang SC;
    // font-weight: bold;
    line-height: 20px;
    // color: #222222;
  }

  .el-tree /deep/ .el-tree-node__children .is-current .el-tree-node__content {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 20px;
    color: #222222;
  }

  .el-tree /deep/ .el-tree-node__children .el-tree-node__content {
    font-size: 16px;
    font-family: PingFang SC;
    // font-weight: bold;
    line-height: 20px;
    // color: #222222;
  }

  .el-tree /deep/ .el_tree_item_name {
    width: 150px;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .el-tree /deep/ .is-current .el_tree_item_name {
    // padding-top: 10px;
  }

  .el-tree /deep/ .el-tree-node__children .el_tree_item_name {
    width: 130px;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    // padding-top: 8px;
  }

  .el-tree .el-tree-node__expand-icon {
    color: #fff !important;
  }

  .el-tree-node__expand-icon.is-leaf {
    color: transparent !important;
  }

  .liStyle {
    background: #c9ffef;
  }

  .liStyle .tit {
    font-weight: bold;
  }

  .seach_box /deep/ .el-input__inner {
    border-radius: 4px 0px 0px 4px;
  }

  .el_table /deep/ .el-table__placeholder {
    width: 0px;
  }

  .el-tree /deep/ .tree_item {
    display: flex;
    align-items: center;
  }

  .el-tree /deep/ .el-checkbox {
    margin-right: 10px;
  }

  /* 定义滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(240, 240, 240, 0);
    opacity: 0;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
    border-radius: 10px;
    // background-color: rgba(240, 240, 240, 0);
    // opacity: 0;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
    // background-color: rgba(240, 240, 240, 0);
    // opacity: 0;
  }

  .uploadDig /deep/ .el-loading-mask {
    border-radius: 42px;
  }

  .uploadDig /deep/ .el-loading-text {
    font-size: 26px;
  }

</style>
